/** 创建图元参数
 * @ 标  识: hchhIOT
 * @ 作  者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
 */

/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import * as d3 from "d3";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetUUID,
  onGetElementCont,
  onSetElementCont,
  onPelDeleteByKey,
  onRectDifference,
} from "@/functions"


/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const workStore = useWorkStore(); // 设备数据

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 类型定义
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 坐标类型 */
type CoordinateType = {
  x: number;
  y: number;
};

/** 图元参数类型*/
type PelInfoType = {
  // 图元名称
  label: string,
  // 图元id
  key: string,
  // 图元类型
  type: string,
  // 图元分类
  category: string,
  // 父键
  parent: string,
  // 位置点
  place?: object,
  // 文本标记标签
  htmls: string,
  // 属性
  attrs: object,
  // 动画
  animations: object,
  // 事件
  events: object,
  // 子属性
  children?: any[],
  // 动画值
  an_vals?: any[]
}

/** 动画-类型 */
type AnimateType = {
  /** 属性说明 */
  label: string,
  /** 动画键 */
  key: string,
  /** 使能状态 */
  enable: boolean,
  /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
  opt_an_classify: number,
  /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
  opt_an_model: number,
  /** 使用数据*/
  use_data: {
    /** 使用数据状态:False-父数据;True-子数据; */
    is_use_parent: boolean,
    /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
    opt_use_parent_set: number,
    /** 使用子数据_选项: 1_图元数据;2_设备数据 */
    opt_use_sub_set: number,
    /** 父id */
    id_parent: string,
    /** 图元id */
    id_pel_data: string,
    /** 设备id  */
    id_equip_data: string,
  }
  /** 触发动画领域 */
  trigger: number[] | string[],
  /** 使用值选项:1-起始和结束;2-多值; */
  opt_use_val: number,
  /** 线性比例的领域 */
  line_domain: number[] | string[],
  /** 线性比例的范围 */
  line_range: number[] | string[],
  /** 起始和结束 */
  from_to: number[] | string[],
  /** 多值 */
  mult_val?: string,
  /** 路径值 */
  path_val: CoordinateType[],
  /** 路径id */
  path_id: string,
  /** 动画延时 */
  begin: number,
  /** 动画时长 */
  dur: number,
  /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
  opt_repeat: number,
  /** 重复次数 */
  repeat_count: number,
  /** 重复时长 */
  repeat_dur: number,
}

/** 位置-枚举 */
enum PlaceEnum {
  // -------------------| ★ 左
  TL = 'tl',  // 上左
  L = 'l',    // 左
  BL = 'bl',  // 下左
  // -------------------| ★ 中
  TM = 'tm',  // 上中
  M = 'm',    // 中间
  BM = 'bm',  // 下中
  // -------------------| ★ 右
  TR = 'tr',  // 上右
  radius = 'r',    // 右
  BR = 'br',  // 下右
}

/** 位置类型 */
type PlaceType = {
  // 🦢 ----------| ★ 左
  [PlaceEnum.TL]: CoordinateType,  /** 上左 */
  [PlaceEnum.L]?: CoordinateType,   /** 左   */
  [PlaceEnum.BL]?: CoordinateType,  /** 下左 */
  // 🦢 ----------| ★ 中
  [PlaceEnum.TM]?: CoordinateType,  /** 上中 */
  [PlaceEnum.M]: CoordinateType,   /** 中间 */
  [PlaceEnum.BM]?: CoordinateType,  /** 下中 */
  // 🦢 ----------| ★ 右
  [PlaceEnum.TR]?: CoordinateType,  /** 上右 */
  [PlaceEnum.radius]?: CoordinateType,   /** 右   */
  [PlaceEnum.BR]: CoordinateType,  /** 下右 */
}

/** 事件_数据类型 */
type EventType = {
  /** 说明*/
  label: string,
  /** 动作类型*/
  key: string,
  /** 使能状态*/
  enable: false,
  /** 发送数据集:1-图元数据;2-发送数据 */
  opt_send_set: number,
  /** 链接变量 */
  link_key: string,
  /** 发送数据类型:1_文本;2_颜色 */
  opt_send_type: number,
  /** 发送文本*/
  send_text: string,
  /** 发送值*/
  send_val: number,
  /** 发送颜色*/
  send_colour: string,
}

/* ================================================================================================ */
//                                函数
/* ================================================================================================ */
//

/** 创建标签-线*/
export const onCreateLine = () => {
 // console.log("✍ 创建标签-线")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = ""
  /** X1坐标*/
  let X1Point = 0
  /** Y1坐标*/
  let Y1Point = 0
  /** Y1坐标*/
  let X2Point = 0
  /** Y1坐标*/
  let Y2Point = 0

  /** 图元类型 */
  let PelType = canvasStore.drawPelType
  if (PelType === "horizontaLine" /*水平线*/) {
    X1Point = canvasStore.recordPoint[0].x
    Y1Point = canvasStore.recordPoint[0].y
    X2Point = canvasStore.recordPoint[1].x
    Y2Point = canvasStore.recordPoint[0].y
    pelName = '水平线_' + cont
  }
  if (PelType === "verticalLine" /*垂直线*/) {
    X1Point = canvasStore.recordPoint[0].x
    Y1Point = canvasStore.recordPoint[0].y
    X2Point = canvasStore.recordPoint[0].x
    Y2Point = canvasStore.recordPoint[1].y
    pelName = '垂直线_' + cont
  }
  if (PelType === "slantLine" /*斜线*/) {
    X1Point = canvasStore.recordPoint[0].x
    Y1Point = canvasStore.recordPoint[0].y
    X2Point = canvasStore.recordPoint[1].x
    Y2Point = canvasStore.recordPoint[1].y
    pelName = '斜线_' + cont
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 起点X坐标
      x1: {
        label: "起点X坐标",
        key: "x1",
        val: X1Point
      },
      // 起点Y坐标
      y1: {
        label: "起点Y坐标",
        key: "y1",
        val: Y1Point
      },
      // 终点X坐标
      x2: {
        label: "终点X坐标",
        key: "x2",
        val: X2Point
      },
      // 终点Y坐标
      y2: {
        label: "终点Y坐标",
        key: "y2",
        val: Y2Point
      },
      // 轮廓宽度
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity,
      },
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke
      },
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 坐标x1 
      x1: <AnimateType>{
        /** 属性说明 */
        label: "坐标x1",
        /** 动画键 */
        key: "x1",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 坐标x1 
      y1: <AnimateType>{
        /** 属性说明 */
        label: "坐标y1",
        /** 动画键 */
        key: "y1",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 坐标x2 
      x2: <AnimateType>{
        /** 属性说明 */
        label: "坐标x2",
        /** 动画键 */
        key: "x2",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 坐标y2 
      y2: <AnimateType>{
        /** 属性说明 */
        label: "坐标y2",
        /** 动画键 */
        key: "y2",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,

        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 数据类型:1-文本;2-数字;3-颜色*/
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
 // console.log(pelInfo);
  workStore.pels.push(pelInfo)  //添加-图元数据
  canvasStore.selectedPel = pelInfo //添加-选择图元数据
  canvasStore.recordPoint = [] // 清理记录点
  canvasStore.tips = ""        // 清理-提示
  menuStore.setMenu("horizontaLine", 0)// 清理-菜单-绘图-水平线 
  menuStore.setMenu("verticalLine", 0) // 清理-菜单-绘图-垂直线 
  menuStore.setMenu("slantLine", 0)    // 清理-菜单-绘图-斜线
  canvasStore.workState = 0    // 清理-工作状态
  canvasStore.drawPelType = "" // 清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []         // 清空选择键
  canvasStore.selectKeys.push(pelId)  // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-圆 */
export const onCreateCircle = () => {
 // console.log("✍ 创建标签-圆")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
 // console.log(findStr)
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "圆_" + cont
  /** 填充id*/
  let fillId = onGetUUID()
  /** 水平坐标值 */
  let leftVal = Number(canvasStore.recordPoint[0].x)
  /** 垂直坐标值 */
  let topVal = Number(canvasStore.recordPoint[0].y)

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算圆半径
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 圆半径 */
  let RadiusVal = 0
  /** 轴长X */
  let axisLenthX = Math.abs(
    canvasStore.recordPoint[0].x - canvasStore.recordPoint[1].x
  );
  /** 轴长Y */
  let axisLenthY = Math.abs(
    canvasStore.recordPoint[0].y - canvasStore.recordPoint[1].y
  )
  if (axisLenthX > axisLenthY) {
    RadiusVal = axisLenthX;
  } else if (axisLenthY > axisLenthX) {
    RadiusVal = axisLenthY;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 位置点
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 位置点 */
  let PlacePoint: PlaceType = {
    /** 上左 */
    tl: {
      x: leftVal - RadiusVal,
      y: topVal - RadiusVal,
    },
    /** 上中 */
    tm: {
      x: leftVal,
      y: topVal - RadiusVal,
    },
    /** 上右 */
    tr: {
      x: leftVal + RadiusVal,
      y: topVal - RadiusVal,
    },
    /** 左 */
    l: {
      x: leftVal - RadiusVal,
      y: topVal
    },
    /** 中间 */
    m: {
      x: leftVal,
      y: topVal
    },
    /** 右 */
    r: {
      x: leftVal + RadiusVal,
      y: topVal
    },
    /** 下左 */
    bl: {
      x: leftVal - RadiusVal,
      y: topVal + RadiusVal
    },
    /** 下中 */
    bm: {
      x: leftVal,
      y: topVal + RadiusVal,
    },
    /** 下右 */
    br: {
      x: leftVal + RadiusVal,
      y: topVal + RadiusVal
    },
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 位置点
    place: PlacePoint,
    // 属性
    attrs: {
      // 填充颜色
      fill: {
        label: "填充",
        key: 'fill',
        val: canvasStore.selectedPen.fill,
        // 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;
        fillOpt: 1,
        // 填充图案
        fillPattern: 1,
        // 填充尺寸
        fillSize: 100,
        // 填充比例
        fillRatio: 50,
        // 填充Id
        fillId: fillId,
        // 填充坐标 x1
        fillX1: 0,
        // 填充坐标 y1
        fillY1: 0,
        // 填充坐标 x2
        fillX2: 0,
        // 填充坐标 y2
        fillY2: 100,
        // 填充坐标 cx
        fillCX: 50,
        // 填充坐标 cy
        fillCY: 50,
        // 填充半径 r
        fillR: 100,
        //偏移量 颜色
        offsets: [
          {
            offset: 20,
            color: "rgba(255,0,0,1)",
          },
          {
            offset: 50,
            color: "rgba(0,255,0,1)",
          },
          {
            offset: 100,
            color: "rgba(0,0,255,1)",
          },
        ],
      },
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 圆心坐标CX
      cx: {
        label: "圆心坐标CX",
        key: "cx",
        val: leftVal
      },
      // 圆心坐标CY
      cy: {
        label: "圆心坐标CY",
        key: "cy",
        val: topVal
      },
      // 半径
      radius: {
        label: "半径",
        key: "radius",
        val: RadiusVal
      },
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动
      cx: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "cx",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动
      cy: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "cy",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 半径 
      radius: <AnimateType>{
        /** 属性说明 */
        label: "半径",
        /** 动画键 */
        key: "radius",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色 
      fill: <AnimateType>{
        /** 属性说明 */
        label: "填充颜色",
        /** 动画键 */
        key: "fill",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_填充 
      fillOpacity: <AnimateType>{
        /** 属性说明 */
        label: "填充透明度",
        /** 动画键 */
        key: "fillOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_轮廓 
      strokeOpacity: <AnimateType>{
        /** 属性说明 */
        label: "轮廓透明度",
        /** 动画键 */
        key: "strokeOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
 // console.log(pelInfo)
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] // 清理记录点
  canvasStore.tips = ""        // 清理-提示
  menuStore.setMenu("circle", 0)       // 清理-菜单-绘图
  canvasStore.workState = 0    // 清理-工作状态
  canvasStore.drawPelType = "" // 清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-椭圆 */
export const onCreateEllipse = () => {
 // console.log("✍ 创建标签-椭圆")
  /**  删除显示 */
  d3.select("#DynamicShowEllipse").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "椭圆_" + cont
  /** 填充id*/
  let fillId = onGetUUID()
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算圆半径1
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 圆半径1 */
  let radius1 = 0
  /** 轴长X */
  let radius1X = Math.abs(
    canvasStore.recordPoint[0].x - canvasStore.recordPoint[1].x
  );
  /** 轴长Y */
  let radius1Y = Math.abs(
    canvasStore.recordPoint[0].y - canvasStore.recordPoint[1].y
  );
  if (radius1X > radius1Y) {
    radius1 = radius1X;
  } else if (radius1Y > radius1X) {
    radius1 = radius1Y;
  }
 // console.log(`半径1==${radius1}`);

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算圆半径2
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 圆半径2 */
  let radius2 = 0;
  /** 轴长X */
  let radius2X = Math.abs(
    canvasStore.recordPoint[0].x - canvasStore.recordPoint[2].x
  );
  /** 轴长Y */
  let radius2Y = Math.abs(
    canvasStore.recordPoint[0].y - canvasStore.recordPoint[2].y
  );
  if (radius2X > radius2Y) {
    radius2 = radius2X;
  } else if (radius2Y > radius2X) {
    radius2 = radius2Y;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色
      fill: {
        label: "填充",
        key: 'fill',
        val: canvasStore.selectedPen.fill,
        // 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;
        fillOpt: 1,
        // 填充图案
        fillPattern: 1,
        // 填充尺寸
        fillSize: 100,
        // 填充比例
        fillRatio: 50,
        // 填充Id
        fillId: fillId,
        // 填充坐标 x1
        fillX1: 0,
        // 填充坐标 y1
        fillY1: 0,
        // 填充坐标 x2
        fillX2: 0,
        // 填充坐标 y2
        fillY2: 100,
        // 填充坐标 cx
        fillCX: 50,
        // 填充坐标 cy
        fillCY: 50,
        // 填充半径 r
        fillR: 100,
        //偏移量 颜色
        offsets: [
          {
            offset: 20,
            color: "rgba(255,0,0,1)",
          },
          {
            offset: 50,
            color: "rgba(0,255,0,1)",
          },
          {
            offset: 100,
            color: "rgba(0,0,255,1)",
          },
        ],
      },
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 圆心坐标CX
      cx: {
        label: "圆心坐标CX",
        key: "cx",
        val: canvasStore.recordPoint[0].x
      },
      // 圆心坐标CY
      cy: {
        label: "圆心坐标CY",
        key: "cy",
        val: canvasStore.recordPoint[0].y
      },
      // 椭圆半径RX
      radiusX: {
        label: "椭圆半径RX",
        key: "radiusX",
        val: radius1
      },
      // 椭圆半径RY
      radiusY: {
        label: "椭圆半径RY",
        key: "radiusY",
        val: radius2
      },
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 圆CX坐标_水平移动_动画" 
      cx: <AnimateType>{
        /** 属性说明 */
        label: "圆CX坐标_水平移动",
        /** 动画键 */
        key: "cx",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 圆CY坐标_垂直移动
      cy: <AnimateType>{
        /** 属性说明 */
        label: "圆CY坐标_垂直移动",
        /** 动画键 */
        key: "cy",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 半径X 
      radiusX: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "半径X",
        /** 动画键 */
        key: "radiusX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 半径Y 
      radiusY: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "半径Y",
        /** 动画键 */
        key: "radiusY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色 
      fill: <AnimateType>{
        /** 属性说明 */
        label: "填充颜色",
        /** 动画键 */
        key: "fill",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        parent: pelId,// 父键
        label: "线条流动", //属性说明
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_填充 
      fillOpacity: <AnimateType>{
        /** 属性说明 */
        label: "填充透明度",
        /** 动画键 */
        key: "fillOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_轮廓 
      strokeOpacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "轮廓透明度",
        /** 动画键 */
        key: "strokeOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
 // console.log(pelInfo);
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] // 清理记录点
  canvasStore.tips = ""        // 清理-提示
  menuStore.setMenu("ellipse", 0)      // 清理-菜单-绘图
  canvasStore.workState = 0    // 清理-工作状态
  canvasStore.drawPelType = "" // 清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-三点弧线 */
export const onCreateArc = () => {
 // console.log("✍ 创建标签-圆弧")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "圆弧_" + cont

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: { label: "元素透明度", key: "opacity", val: canvasStore.selectedPen.opacity },
      // 起点坐标X
      startX: { label: "起点坐标X", key: "startX", val: canvasStore.recordPoint[0].x },
      // 起点坐标Y
      startY: { label: "起点坐标Y", key: "startY", val: canvasStore.recordPoint[0].y },
      // 终点坐标X
      endX: { label: "终点坐标X", key: "endX", val: canvasStore.recordPoint[1].x },
      // 终点坐标Y
      endY: { label: "终点坐标Y", key: "endY", val: canvasStore.recordPoint[1].y },
      // 控制点坐标X
      ctrlX: { label: "控制点坐标X", key: "ctrlX", val: canvasStore.recordPoint[2].x },
      // 控制点坐标Y
      ctrlY: { label: "控制点坐标Y", key: "ctrlY", val: canvasStore.recordPoint[2].y },

    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = []// 清理记录点
  canvasStore.tips = ""       // 清理-提示
  menuStore.setMenu("arc", 0)         // 清理-菜单-绘图
  canvasStore.workState = 0   // 清理-工作状态
  canvasStore.drawPelType = ""// 清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-圆分多边形 */
export const onCreateCirclePolygon = () => {
 // console.log("✍ 创建标签-圆分多边形")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "圆分多边形" + cont
  /** 填充id*/
  let fillId = onGetUUID()
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算圆半径
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  //★ 计算 差值
  /** 差值X */
  let X = canvasStore.recordPoint[1].x - canvasStore.recordPoint[0].x;
  /** 差值Y */
  let Y = canvasStore.recordPoint[1].y - canvasStore.recordPoint[0].y;
  let Max = 0;
  if (X > Y) {
    Max = X;
  } else if (Y > X) {
    Max = Y;
  }
  /** 圆半径 */
  let radius = Max

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 填充颜色
      fill: {
        label: "填充",
        key: 'fill',
        val: canvasStore.selectedPen.fill,
        // 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;
        fillOpt: 1,
        // 填充图案
        fillPattern: 1,
        // 填充尺寸
        fillSize: 100,
        // 填充比例
        fillRatio: 50,
        // 填充Id
        fillId: fillId,
        // 填充坐标 x1
        fillX1: 0,
        // 填充坐标 y1
        fillY1: 0,
        // 填充坐标 x2
        fillX2: 0,
        // 填充坐标 y2
        fillY2: 100,
        // 填充坐标 cx
        fillCX: 50,
        // 填充坐标 cy
        fillCY: 50,
        // 填充半径 r
        fillR: 100,
        //偏移量 颜色
        offsets: [
          {
            offset: 20,
            color: "rgba(255,0,0,1)",
          },
          {
            offset: 50,
            color: "rgba(0,255,0,1)",
          },
          {
            offset: 100,
            color: "rgba(0,0,255,1)",
          },
        ],
      },
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 圆心坐标CX
      cx: {
        label: "圆心坐标CX",
        key: "cx",
        val: canvasStore.recordPoint[0].x
      },
      // 圆心坐标CY
      cy: {
        label: "圆心坐标CY",
        key: "cy",
        val: canvasStore.recordPoint[0].y
      },
      // 半径
      circleRadius: {
        label: "半径",
        key: "circleRadius",
        val: radius
      },
      // 等分数量
      quantity: {
        label: "等分数量",
        key: "quantity",
        val: 3
      },
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色 
      fill: <AnimateType>{
        /** 属性说明 */
        label: "填充颜色",
        /** 动画键 */
        key: "fill",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_填充 
      fillOpacity: <AnimateType>{
        /** 属性说明 */
        label: "填充透明度",
        /** 动画键 */
        key: "fillOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_轮廓 
      strokeOpacity: <AnimateType>{
        /** 属性说明 */
        label: "轮廓透明度",
        /** 动画键 */
        key: "strokeOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] // 清理记录点
  canvasStore.tips = ""        // 清理提示
  menuStore.setMenu("circlePolygon", 0)// 清理-绘图-圆分多边形
  canvasStore.workState = 0    // 清理-工作状态
  canvasStore.drawPelType = "" // 清理-绘制类型
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        //清空选择键
  canvasStore.selectKeys.push(pelId) //设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-矩形*/
export const onCreateRectangle = () => {
 // console.log("✍ 创建标签-矩形")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "矩形_" + cont
  /** 填充id*/
  let fillId = onGetUUID()
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算矩形 差值
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let [width, height, top, left] = onRectDifference(
    Number(canvasStore.recordPoint[0].x),
    Number(canvasStore.recordPoint[1].x),
    Number(canvasStore.recordPoint[0].y),
    Number(canvasStore.recordPoint[1].y),
  )

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 填充颜色
      fill: {
        label: "填充",
        key: 'fill',
        val: canvasStore.selectedPen.fill,
        // 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;
        fillOpt: 1,
        // 填充图案
        fillPattern: 1,
        // 填充尺寸
        fillSize: 100,
        // 填充比例
        fillRatio: 50,
        // 填充Id
        fillId: fillId,
        // 填充坐标 x1
        fillX1: 0,
        // 填充坐标 y1
        fillY1: 0,
        // 填充坐标 x2
        fillX2: 0,
        // 填充坐标 y2
        fillY2: 100,
        // 填充坐标 cx
        fillCX: 50,
        // 填充坐标 cy
        fillCY: 50,
        // 填充半径 r
        fillR: 100,
        //偏移量 颜色
        offsets: [
          {
            offset: 20,
            color: "rgba(255,0,0,1)",
          },
          {
            offset: 50,
            color: "rgba(0,255,0,1)",
          },
          {
            offset: 100,
            color: "rgba(0,0,255,1)",
          },
        ],
      },
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 坐标 X
      left: {
        label: "坐标X",
        key: "left",
        val: left
      },
      // 坐标 X
      top: {
        label: "坐标Y",
        key: "top",
        val: top
      },
      // 圆角FX
      fx: {
        label: "圆角FX",
        key: "fx",
        val: canvasStore.selectedPen.fx
      },
      // 圆角FY
      fy: {
        label: "圆角FY",
        key: "fy",
        val: canvasStore.selectedPen.fy
      },
      // 宽
      width: {
        label: "宽",
        key: "width",
        val: width
      },
      // 高
      height: {
        label: "宽",
        key: "height",
        val: height
      },
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动
      left: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "left",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动
      top: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "top",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 矩形宽度 
      rectWidth: <AnimateType>{
        /** 属性说明 */
        label: "宽度",
        /** 动画键 */
        key: "rectWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 矩形高度 
      rectHeight: <AnimateType>{
        /** 属性说明 */
        label: "高度",
        /** 动画键 */
        key: "rectHeight",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色 
      fill: <AnimateType>{
        /** 属性说明 */
        label: "填充颜色",
        /** 动画键 */
        key: "fill",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_填充 
      fillOpacity: <AnimateType>{
        /** 属性说明 */
        label: "填充透明度",
        /** 动画键 */
        key: "fillOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_轮廓 
      strokeOpacity: <AnimateType>{
        /** 属性说明 */
        label: "轮廓透明度",
        /** 动画键 */
        key: "strokeOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
 // console.log(pelInfo)
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] // 清理记录点
  canvasStore.tips = ""        // 清理-提示
  menuStore.setMenu("rectangle", 0)    // 清理-菜单-绘图
  canvasStore.workState = 0    // 清理-工作状态
  canvasStore.drawPelType = "" // 清理-绘制类型
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-多边形*/
export const onCreatePolygon = () => {
 // console.log("✍ 创建标签-多边形")
  /**  删除显示-线 */
  d3.select("#DynamicShowLine").remove()
  /**  删除显示-路径 */
  d3.select("#DynamicShowPath").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "多边形" + cont
  /** 填充id*/
  let fillId = onGetUUID()
  /** 路径点*/
  let pathPoints = JSON.parse(JSON.stringify(canvasStore.recordPoint))

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 填充颜色
      fill: {
        label: "填充",
        key: 'fill',
        val: canvasStore.selectedPen.fill,
        // 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;
        fillOpt: 1,
        // 填充图案
        fillPattern: 1,
        // 填充尺寸
        fillSize: 100,
        // 填充比例
        fillRatio: 50,
        // 填充Id
        fillId: fillId,
        // 填充坐标 x1
        fillX1: 0,
        // 填充坐标 y1
        fillY1: 0,
        // 填充坐标 x2
        fillX2: 0,
        // 填充坐标 y2
        fillY2: 100,
        // 填充坐标 cx
        fillCX: 50,
        // 填充坐标 cy
        fillCY: 50,
        // 填充半径 r
        fillR: 100,
        //偏移量 颜色
        offsets: [
          {
            offset: 20,
            color: "rgba(255,0,0,1)",
          },
          {
            offset: 50,
            color: "rgba(0,255,0,1)",
          },
          {
            offset: 100,
            color: "rgba(0,0,255,1)",
          },
        ],
      },
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 线链接样式
      strokeLinejoin: {
        label: "线链接样式",
        key: "strokeLinejoin",
        val: 'round',
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 路径点
      pathPoints: {
        label: "路径点",
        key: "pathPoints",
        val: pathPoints,
      }
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色 
      fill: <AnimateType>{
        /** 属性说明 */
        label: "填充颜色",
        /** 动画键 */
        key: "fill",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },

      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_填充 
      fillOpacity: <AnimateType>{
        /** 属性说明 */
        label: "填充透明度",
        /** 动画键 */
        key: "fillOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_轮廓 
      strokeOpacity: <AnimateType>{
        /** 属性说明 */
        label: "轮廓透明度",
        /** 动画键 */
        key: "strokeOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据


  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-折线*/
export const onCreatePolyline = () => {
 // console.log("✍ 创建标签-折线")
  /**  删除显示-线 */
  d3.select("#DynamicShowLine").remove()
  /**  删除显示-路径 */
  d3.select("#DynamicShowPath").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "折线" + cont
  /** 路径点*/
  let pathPoints = JSON.parse(JSON.stringify(canvasStore.recordPoint))

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 线链接样式
      strokeLinejoin: {
        label: "线链接样式",
        key: "strokeLinejoin",
        val: 'round',
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 路径点
      pathPoints: {
        label: "路径点",
        key: "pathPoints",
        val: pathPoints,
      }
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-路径*/
export const onCreatePath = () => {
 // console.log("✍ 创建标签-路径")
  /**  删除显示-线 */
  d3.select("#DynamicShowLine").remove()
  /**  删除显示-路径 */
  d3.select("#DynamicShowPath").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符 */
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "路径" + cont
  /** 路径点*/
  let pathPoints = JSON.parse(JSON.stringify(canvasStore.recordPoint))

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 路径点
      pathPoints: {
        label: "路径点",
        key: "pathPoints",
        val: pathPoints,
      }
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{        // 父键
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 结束绘制 */
export const onDrawEnd = () => {
 // console.log("✍  创建标签-结束绘制")
  let PelType = canvasStore.drawPelType
 // console.log(PelType)
  if (PelType === 'polygon'/*多边形*/) {
    onCreatePolygon()
  }
  if (PelType === "polyline" /*折线*/) {
    onCreatePolyline()
  }
  if (PelType === "path" /*路径*/) {
    onCreatePath()
  }
}

/** 创建标签-Svg文本 */
export const onCreateSvgText = () => {
 // console.log("✍ 创建标签-Svg文本")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "Svg文本" + cont
  /** 填充id*/
  let fillId = onGetUUID()
  /** 路径id*/
  let pathId = onGetUUID()
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 填充颜色
      fill: {
        label: "填充",
        key: 'fill',
        val: canvasStore.selectedPen.fill,
        // 填充选项:1-颜色填充;2-图案填充;3-线性渐变填充;4-放射渐变填充;
        fillOpt: 1,
        // 填充图案
        fillPattern: 1,
        // 填充尺寸
        fillSize: 100,
        // 填充比例
        fillRatio: 50,
        // 填充Id
        fillId: fillId,
        // 填充坐标 x1
        fillX1: 0,
        // 填充坐标 y1
        fillY1: 0,
        // 填充坐标 x2
        fillX2: 0,
        // 填充坐标 y2
        fillY2: 100,
        // 填充坐标 cx
        fillCX: 50,
        // 填充坐标 cy
        fillCY: 50,
        // 填充半径 r
        fillR: 100,
        //偏移量 颜色
        offsets: [
          {
            offset: 20,
            color: "rgba(255,0,0,1)",
          },
          {
            offset: 50,
            color: "rgba(0,255,0,1)",
          },
          {
            offset: 100,
            color: "rgba(0,0,255,1)",
          },
        ],
      },
      // 轮廓颜色
      stroke: {
        label: "轮廓颜色",
        key: "stroke",
        val: canvasStore.selectedPen.stroke,
      },
      // 轮廓宽度
      strokeWidth: {
        label: "轮廓宽度",
        key: "strokeWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 轮廓端点形状
      strokeLinecap: {
        label: "轮廓端点形状",
        key: "strokeLinecap",
        val: canvasStore.selectedPen.stroke_linecap,
      },
      // 虚线
      strokeDasharray: {
        label: "虚线",
        key: "strokeDasharray",
        val: canvasStore.selectedPen.stroke_dasharray,
      },
      // 虚线偏移
      strokeDashoffset: {
        label: "虚线偏移",
        key: "strokeDashoffset",
        val: canvasStore.selectedPen.stroke_dashoffset,
      },
      // 透明度_元素
      opacity: {
        label: "元素透明度",
        key: "opacity",
        val: canvasStore.selectedPen.opacity
      },
      // 透明度_填充
      fillOpacity: {
        label: "填充透明度",
        key: "fillOpacity",
        val: canvasStore.selectedPen.fill_opacity,
      },
      // 透明度_轮廓
      strokeOpacity: {
        label: "轮廓透明度",
        key: "strokeOpacity",
        val: canvasStore.selectedPen.stroke_opacity,
      },
      // 坐标 X
      textLeft: {
        label: "坐标X",
        key: "left",
        val: canvasStore.recordPoint[0].x
      },
      // 坐标 Y
      textTop: {
        label: "坐标Y",
        key: "top",
        val: canvasStore.recordPoint[0].y
      },
      // 文本高度
      fontSize: {
        label: "文本高度",
        key: "fontSize",
        val: 100,
      },
      // 文本字体
      fontFamily: {
        label: "文本字体",
        key: "fontFamily",
        val: 'Arial',
      },
      // 对齐方式
      textAnchor: {
        label: "对齐方式",
        key: "textAnchor",
        val: "middle",
      },
      // 划线设置
      textDecoration: {
        label: "划线设置",
        key: "textDecoration",
        val: 'none',
      },
      // 文本样式
      fontStyle: {
        label: "文本样式",
        key: "fontStyle",
        val: "normal",
      },
      // 文本粗细
      fontWeight: {
        label: "粗细",
        key: "fontWeight",
        val: "bold",
      },
      // 文本内容
      textContent: {
        label: "文本内容",
        key: "textContent",
        val: "文本内容",
      },
      // 路径文本
      pathText: {
        label: "路径文本",
        key: "pathText",
        /** 使用路径 */
        usePath: false,
        /** 切线方向的偏移 */
        dx: 0,
        /** 法线方向的偏移 */
        dy: 0,
        /** 路径超文本标签 */
        pathHtml: 'M214,264C303.583,174,393.167,84,484,82C574.833,80,666.917,166,759,252',
        /** 路径id */
        pathId: pathId
      },

    },
    // 动画
    animations: {
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 文本值 
      textContent: <AnimateType>{
        /** 属性说明 */
        label: "文本值",
        /** 动画键 */
        key: "textContent",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 6,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 填充颜色 
      fill: <AnimateType>{
        /** 属性说明 */
        label: "填充颜色",
        /** 动画键 */
        key: "fill",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓颜色 
      stroke: <AnimateType>{
        /** 属性说明 */
        label: "轮廓颜色",
        /** 动画键 */
        key: "stroke",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 1,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: ['rgb(255,0,0)', 'rgb(0,255,0)'],
        /** 多值 */
        mult_val: 'rgb(255,0,0);rgb(0,255,0);rgb(0,0,255)',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 轮廓宽度 
      strokeWidth: <AnimateType>{
        /** 属性说明 */
        label: "轮廓宽度",
        /** 动画键 */
        key: "strokeWidth",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [2, 20],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 虚线 
      strokeDasharray: <AnimateType>{
        /** 属性说明 */
        label: "虚线",
        /** 动画键 */
        key: "strokeDasharray",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线条流动 
      strokeDashoffset: <AnimateType>{
        /** 属性说明 */
        label: "线条流动",
        /** 动画键 */
        key: "strokeDashoffset",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_元素 
      opacity: <AnimateType>{
        /** 属性说明 */
        label: "元素透明度",
        /** 动画键 */
        key: "opacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 0],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_填充 
      fillOpacity: <AnimateType>{
        /** 属性说明 */
        label: "填充透明度",
        /** 动画键 */
        key: "fillOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 透明度_轮廓 
      strokeOpacity: <AnimateType>{
        /** 属性说明 */
        label: "轮廓透明度",
        /** 动画键 */
        key: "strokeOpacity",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 3,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 1],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] // 清理-记录点
  canvasStore.tips = ""        // 清理-提示
  menuStore.setMenu("svgText", 0)      // 清理-菜单-绘图
  canvasStore.workState = 0   //清理-工作状态
  canvasStore.drawPelType = ""//清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-DIV文本 */
export const onCreateDIVText = () => {
 // console.log("✍ 创建标签-DIV文本")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "DIV文本" + cont

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算矩形 差值
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let [width, height, top, left] = onRectDifference(
    Number(canvasStore.recordPoint[0].x),
    Number(canvasStore.recordPoint[1].x),
    Number(canvasStore.recordPoint[0].y),
    Number(canvasStore.recordPoint[1].y),
  )

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'div',
    // 属性
    attrs: {
      // 坐标 X
      left: {
        label: "坐标X",
        key: "left",
        val: left
      },
      // 坐标 X
      top: {
        label: "坐标Y",
        key: "top",
        val: top
      },
      // 宽
      width: {
        label: "宽",
        key: "width",
        val: width
      },
      // 高
      height: {
        label: "宽",
        key: "height",
        val: height
      },
      // 旋转角度 rotate
      rotate: {
        label: "旋转角度",
        key: "rotate",
        val: 0,
      },
      // 边框宽度 borderWidth
      borderWidth: {
        label: "边框宽度",
        key: "borderWidth",
        val: canvasStore.selectedPen.stroke_width,
      },
      // 边框样式 borderStyle
      borderStyle: {
        label: "边框样式",
        key: "borderStyle",
        val: "solid",
      },
      // 边框颜色 borderColor
      borderColor: {
        label: "边框颜色",
        key: "borderColor",
        type: "input_color",
        val: canvasStore.selectedPen.stroke,
      },
      // 边框圆角 borderRadius
      borderRadius: {
        label: "边框圆角",
        key: "borderRadius",
        val: 5,
      },
      // 文本内容 fontContent
      fontContent: {
        label: "文本内容",
        key: "fontContent",
        val: pelName,
      },
      // 文本高度 fontSize
      fontSize: {
        label: "文本高度",
        key: "fontSize",
        val: 36,
      },
      // 字符之间的间距 letterSpac
      letterSpac: {
        label: "字符之间的间距",
        key: "letterSpac",
        val: 0,
      },
      // 字间距 wordSpac
      wordSpac: {
        label: "字间距",
        key: "wordSpac",
        val: 0,
      },
      // 文本字体 fontFamily
      fontFamily: {
        label: "文本字体",
        key: "fontFamily",
        val: "Arial",
      },
      // 文本样式 fontStyle
      fontStyle: {
        label: "文本样式",
        key: "fontStyle",
        val: "normal",
      },
      // 粗细 fontWeight
      fontWeight: {
        label: "粗细",
        key: "fontWeight",
        val: "bold",
      },
      // 文本水平对齐方式 textAlign
      textAlign: {
        label: "文本水平对齐方式",
        key: "textAlign",
        val: "center",
      },
      // 第一行的缩进 textIndent
      textIndent: {
        label: "第一行的缩进",
        key: "textIndent",
        type: "input_number",
        val: 0,
      },
      // 行高 rowHeight
      rowHeight: {
        label: "行高",
        key: "RowHeight",
        val: 1.5,
      },
      // 文本颜色 fontColor
      fontColor: {
        label: "文本颜色",
        key: "fontColor",
        val: "rgb(255,255,255)",
      },
      // 背景颜色 backgroundColor
      backgroundColor: {
        label: "背景颜色",
        key: "backgroundColor",
        val: "rgba(255,255,255,0)",
      },
      // 水平阴影 shadowHorizontal
      shadowHorizontal: {
        label: "水平阴影",
        key: "shadowHorizontal",
        val: 0,
      },
      // 垂直阴影 shadowVertical
      shadowVertical: {
        label: "垂直阴影",
        key: "shadowVertical",
        val: 0,
      },
      // 模糊阴影 shadowvague
      shadowvague: {
        label: "模糊阴影",
        key: "shadowvague",
        val: 0,
      },
      // 阴影颜色 shadowColor
      shadowColor: {
        label: "阴影颜色",
        key: "shadowColor",
        val: "rgba(255,255,255,0)",
      },
      // 叠放层级 zIndex
      zIndex: {
        label: "叠放层级",
        key: "zIndex",
        val: -1,
      }
    },
    // 动画
    animations: {
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
  workStore.pels.push(pelInfo) // 添加-图元数据
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] // 清理-记录点
  canvasStore.tips = ""        // 清理-提示
  menuStore.setMenu("divText", 0)      // 清理-菜单-绘图
  canvasStore.workState = 0   //清理-工作状态
  canvasStore.drawPelType = ""//清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-svg图片*/
export const onCreateDIVImage = () => {
 // console.log("✍ 创建标签-svg图片")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "svg图片" + cont

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算矩形 差值
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let [width, height, top, left] = onRectDifference(
    Number(canvasStore.recordPoint[0].x),
    Number(canvasStore.recordPoint[1].x),
    Number(canvasStore.recordPoint[0].y),
    Number(canvasStore.recordPoint[1].y),
  )

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'svg',
    // 属性
    attrs: {
      // 坐标 X
      left: {
        label: "坐标X",
        key: "left",
        val: left
      },
      // 坐标 X
      top: {
        label: "坐标Y",
        key: "top",
        val: top
      },
      // 宽度
      width: {
        label: "宽",
        key: "width",
        val: width
      },
      // 高度
      height: {
        label: "宽",
        key: "height",
        val: height
      },
      // 图片数据
      imageData: {
        label: "图片数据",
        key: "imageData",
        val:"",
      },
    },
    // 动画
    animations: {
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
 // console.log(pelInfo)
  workStore.pels.push(pelInfo)
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] //清理记录点
  canvasStore.tips = ""
  /** 菜单-绘图-svg图片 */
  menuStore.setMenu("svgImage", 0)
  canvasStore.workState = 0   //清理-工作状态
  canvasStore.drawPelType = ""//清理-绘制类型

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-块 */
export const onCreateDIVBlock = () => {
  // console.log("✍ 创建标签-块")
  /**  删除显示 */
  d3.select("#DynamicShowPel").remove()

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储、建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 查询字符*/
  let findStr = String(canvasStore.drawPelType) + "Cont"
  /** 计数 */
  let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1))
  /** 图元id */
  let pelId = String(canvasStore.drawPelType) + onGetUUID()
  /** 图元名称*/
  let pelName = "块" + cont
  let HtmlLabel = `<path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M266,557 L483,432 L483,183 L266,57 L50,182 L50,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M778,557 L994.5063509461097,432 L995,182 L778,57 L562,182 L562,432z' fill='none'></path><path stroke='rgb(0, 0, 0)' stroke-width='40' opacity='1' fill-opacity='1' stroke-opacity='1'  d='M512,968 L729,843 L729,593 L512,468 L296,593 L296,843z' fill='none'></path>`

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 计算矩形 差值
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let [width, height, top, left] = onRectDifference(
    Number(canvasStore.recordPoint[0].x),
    Number(canvasStore.recordPoint[1].x),
    Number(canvasStore.recordPoint[0].y),
    Number(canvasStore.recordPoint[1].y),
  )

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 位置点
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 位置点 */
  let PlacePoint: PlaceType = {
    // 🦢 ----------| ★★ 位置点-左
    /** 上左 */
    tl: {
      x: left,
      y: top,
    },
    /** 左 */
    l: {
      x: left,
      y: top + (height / 2)
    },
    /** 下左 */
    bl: {
      x: left,
      y: top + height
    },

    // 🦢 ----------| ★★ 位置点-中
    /** 上中 */
    tm: {
      x: left + (width / 2),
      y: top,
    },
    /** 中间 */
    m: {
      x: left + (width / 2),
      y: top + (height / 2)
    },
    /** 下中 */
    bm: {
      x: left + (width / 2),
      y: top + height,
    },

    // 🦢 ----------| ★★ 位置点-右
    /** 上右 */
    tr: {
      x: left + width,
      y: top,
    },
    /** 右 */
    r: {
      x: left + width,
      y: top + (height / 2)
    },
    /** 下右 */
    br: {
      x: left + width,
      y: top + height
    },
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: pelId,
    // 父键
    parent: 'none',
    // 图元类型
    type: canvasStore.drawPelType,
    // 图元分类
    category: 'div',
    // 位置点
    place: PlacePoint,
    // 文本标记标签
    htmls: HtmlLabel,
    // 属性
    attrs: {
      // 旋转
      rotate: {
        label: "旋转",
        key: "rotate",
        val: 0
      },
      // 坐标 X
      left: {
        label: "坐标X",
        key: "left",
        val: left
      },
      // 坐标 X
      top: {
        label: "坐标Y",
        key: "top",
        val: top
      },
      // 宽
      width: {
        label: "宽",
        key: "width",
        val: width
      },
      // 高
      height: {
        label: "宽",
        key: "height",
        val: height
      },
      // 视图盒子x坐标
      boxLeft: {
        label: "视图盒子x坐标",
        key: "boxLeft",
        val: 0
      },
      // 视图盒子y坐标
      boxTop: {
        label: "视图盒子y坐标",
        key: "boxTop",
        val: 0
      },
      // 视图盒子宽
      boxWidth: {
        label: "视图盒子宽",
        key: "boxWidth",
        val: 1024
      },
      // 视图盒子高
      boxHeight: {
        label: "视图盒子高",
        key: "boxHeight",
        val: 1024
      },
      // 块标签
      blockHtml: {
        label: "块标签",
        key: "blockHtml",
        val: JSON.parse(JSON.stringify(canvasStore.selectedBlock.val))
      },
      // 图层
      zIndex: {
        label: "图层",
        key: "zIndex",
        val: 1
      },
    },
    // 动画
    animations: {
      // 旋转 
      rotate: <AnimateType>{
        /** 属性说明 */
        label: "旋转",
        /** 动画键 */
        key: "rotate",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90, 0, 0],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 缩放 
      scale: <AnimateType>{
        /** 属性说明 */
        label: "缩放",
        /** 动画键 */
        key: "scale",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },

        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [1, 4, 2],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平移动 
      translateX: <AnimateType>{
        /** 属性说明 */
        label: "水平移动",
        /** 动画键 */
        key: "translateX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直移动 
      translateY: <AnimateType>{
        /** 属性说明 */
        label: "垂直移动",
        /** 动画键 */
        key: "translateY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [10, 10, 200, 200],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 水平拉伸 
      skewX: <AnimateType>{
        /** 属性说明 */
        label: "水平拉伸",
        /** 动画键 */
        key: "skewX",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 垂直拉伸 
      skewY: <AnimateType>{
        /** 属性说明 */
        label: "垂直拉伸",
        /** 动画键 */
        key: "skewY",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 2,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 线性移动 
      lineMove: <AnimateType>{
        /** 属性说明 */
        label: "线性移动",
        /** 动画键 */
        key: "lineMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 4,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '-100;0;300',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
      // 路径移动 
      pathMove: <AnimateType>{
        /** 属性说明 */
        label: "路径移动",
        /** 动画键 */
        key: "pathMove",
        /** 使能状态 */
        enable: false,
        /** 动画类别:1-样式;2-变换;3-属性;4-线性;5-路径;6-文本内容; */
        opt_an_classify: 5,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 3,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [0, 1],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1000],
        /** 线性比例的范围 */
        line_range: [0, 10],
        /** 起始和结束 */
        from_to: [0, 500],
        /** 多值 */
        mult_val: '100;900;100',
        /** 路径值 */
        path_val: [
          { x: 1, y: 1 },
          { x: 1, y: 1 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 0,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {
      // 鼠标移到图元上
      mouseover: <EventType>{
        /** 说明*/
        label: "鼠标移到图元上",
        /** 动作类型*/
        key: "mouseover",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标从图元上移开
      mouseout: <EventType>{
        /** 说明*/
        label: "鼠标从图元上移开",
        /** 动作类型*/
        key: "mouseout",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上按下
      mousedown: <EventType>{
        /** 说明*/
        label: "鼠标在图元上按下",
        /** 动作类型*/
        key: "mousedown",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上抬起
      mouseup: <EventType>{
        /** 说明*/
        label: "鼠标在图元上抬起",
        /** 动作类型*/
        key: "mouseup",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      },
      // 鼠标在图元上双击
      dblclick: <EventType>{
        /** 说明*/
        label: "鼠标在图元上双击",
        /** 动作类型*/
        key: "dblclick",
        /** 使能状态*/
        enable: false,
        /** 发送数据集:1-图元数据;2-发送数据 */
        opt_send_set: 2,
        /** 链接变量 */
        link_key: 'none',
        /** 发送数据类型:1_文本;2_颜色 */
        opt_send_type: 1,
        /** 发送文本*/
        send_text: '',
        /** 发送颜色*/
        send_colour: '',
      }
    },
  }
 // console.log(pelInfo)
  workStore.pels.push(pelInfo)
  canvasStore.selectedPel = pelInfo// 添加-选择图元数据
  canvasStore.recordPoint = [] //清理记录点
  canvasStore.tips = ""
  /** 菜单-绘图-svg图片 */
  menuStore.setMenu("divBlock", 0)
  canvasStore.workState = 0   //清理-工作状态
  canvasStore.drawPelType = ""//清理-绘制类型
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 不显示光标
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
  canvasStore.selectKeys = []        // 清空选择键
  canvasStore.selectKeys.push(pelId) // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 创建标签-包 */
export const onCreateWrap = () => {
 // console.log("创建标签-包");
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 使用的变量
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 // console.log("★ 使用的变量")
  /** ★ 选中的id */
  let selectKeys = canvasStore.selectKeys;
 // console.log(selectKeys);
  /** 计数 */
  let WrapCont = onSetElementCont(
    "wrapCont",
    Number(onGetElementCont("wrapCont")) + 1
  );
  /** 包id */
  let wrapId = 'wrap' + onGetUUID();
  /** 图元名称*/
  let pelName = "图元包_" + WrapCont;
  /** ★ 图元数据 */
  let pels = workStore.pels;
  /** ★ 选中的-视图数据 */
  let SelectedViewData: any[] = [];

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历选择键
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 // console.log("★ 构建-选中的视图数据")
  /** 遍历-选中的id */
  for (let index = 0; index < selectKeys.length; index++) {
    /** 查询键 */
    const FindKey = selectKeys[index];
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 遍历图元-[视图数据],更改-[父键];更改-[图元分类];删除-[选定的图元]
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    for (let Index = 0; Index < pels.length; Index++) {
      /** 图元项 */
      let pelItem = pels[Index];
      if (pelItem.type === 'wrap') {
        canvasStore.tips = '选择的图元中有包,不能再创建包';
        return;
      }
     // console.log(pelItem);
      if (pelItem.key === FindKey) {
        pelItem.parent = wrapId;  // 更改父键
        pelItem.category = 'div';// 图元分类

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 更改动画父Id
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 旋转 rotate 
        try {
          pelItem.animations.rotate.use_data.is_use_parent = true;
        } catch (error) { }
        // 缩放 scale
        try {
          pelItem.animations.scale.use_data.is_use_parent = true;
        } catch (error) { }
        // 水平平移 translateX
        try {
          pelItem.animations.translateX.use_data.is_use_parent = true;
        } catch (error) { }
        // 垂直平移 translateY
        try {
          pelItem.animations.translateY.use_data.is_use_parent = true;
        } catch (error) { }
        // 水平拉伸 skewX
        try {
          pelItem.animations.skewX.use_data.is_use_parent = true;
        } catch (error) { }
        // 垂直拉伸 skewY
        try {
          pelItem.animations.skewY.use_data.is_use_parent = true;
        } catch (error) { }
        // 线性移动 lineMove
        try {
          pelItem.animations.lineMove.use_data.is_use_parent = true;
        } catch (error) { }
        // 路径移动 pathMove
        try {
          pelItem.animations.pathMove.use_data.is_use_parent = true;
        } catch (error) { }
        //--------------------------------------------------------------------| 属性        
        // 坐标x1
        try {
          pelItem.animations.x1.use_data.is_use_parent = true;
        } catch (error) { }
        // 坐标x2
        try {
          pelItem.animations.x2.use_data.is_use_parent = true;
        } catch (error) { }
        // 坐标y1
        try {
          pelItem.animations.y1.use_data.is_use_parent = true;
        } catch (error) { }
        // 坐标y2
        try {
          pelItem.animations.y2.use_data.is_use_parent = true;
        } catch (error) { }
        // 圆心cx
        try {
          pelItem.animations.cx.use_data.is_use_parent = true;
        } catch (error) { }
        // 圆心cy
        try {
          pelItem.animations.cy.use_data.is_use_parent = true;
        } catch (error) { }
        // 半径 radius
        try {
          pelItem.animations.radius.use_data.is_use_parent = true;
        } catch (error) { }
        // 半径 radiusX
        try {
          pelItem.animations.radiusX.use_data.is_use_parent = true;
        } catch (error) { }
        // 半径 radiusY
        try {
          pelItem.animations.radiusY.use_data.is_use_parent = true;
        } catch (error) { }
        // 水平移动 left
        try {
          pelItem.animations.left.use_data.is_use_parent = true;
        } catch (error) { }
        // 垂直移动 top
        try {
          pelItem.animations.top.use_data.is_use_parent = true;
        } catch (error) { }
        // 矩形宽度 rectWidth
        try {
          pelItem.animations.rectWidth.use_data.is_use_parent = true;
        } catch (error) { }
        // 矩形高度 rectHeight
        try {
          pelItem.animations.rectHeight.use_data.is_use_parent = true;
        } catch (error) { }
        // 文本内容
        try {
          pelItem.animations.textContent.use_data.is_use_parent = true;
        } catch (error) { }
        // 填充颜色 fill
        try {
          pelItem.animations.fill.use_data.is_use_parent = true;
        } catch (error) { }
        // 轮廓颜色 
        try {
          pelItem.animations.stroke.use_data.is_use_parent = true;
        } catch (error) { }
        // 虚线 
        try {
          pelItem.animations.strokeDasharray.use_data.is_use_parent = true;
        } catch (error) { }
        // 线条流动 
        try {
          pelItem.animations.strokeDashoffset.use_data.is_use_parent = true;
        } catch (error) { }
        // 透明度_元素 
        try {
          pelItem.animations.opacity.use_data.is_use_parent = true;
        } catch (error) { }
        // 透明度_填充 
        try {
          pelItem.animations.fillOpacity.use_data.is_use_parent = true;
        } catch (error) { }
        // 透明度_轮廓 
        try {
          pelItem.animations.strokeOpacity.use_data.is_use_parent = true;
        } catch (error) { }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 建立父动画参数
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        pelItem.an_vals = [
          {
            name: '状态',
            label: 'state',
            key: onGetUUID(),
            val: '0'
          }
        ];// 父动画值
        SelectedViewData.push(pelItem);//添加到选择视图
        pels.splice(Index, 1);//删除-选定的图元
      }
    }
  }
 // console.log(SelectedViewData)

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 图元参数 */
  let pelInfo = <PelInfoType>{
    // 图元名称
    label: pelName,
    // 图元id
    key: wrapId,
    // 父键
    parent: 'none',
    // 图元类型
    type: "wrap",
    // 图元分类
    category: 'div',
    // 属性
    attrs: {
      // 旋转 
      rotate: {
        label: "旋转",
        key: "rotate",
        val: 0
      },
      // 缩放 
      scale: {
        label: "缩放",
        key: "scale",
        val: 1
      },
      // 水平拉伸 
      skewX: {
        label: "水平拉伸",
        key: "skewX",
        val: 0
      },
      // 垂直拉伸 
      skewY: {
        label: "垂直拉伸",
        key: "skewY",
        val: 0
      },
      // 坐标 X
      left: {
        label: "坐标X",
        key: "left",
        val: 0
      },
      // 坐标 X
      top: {
        label: "坐标Y",
        key: "top",
        val: 0
      },
      // 包标签
      wrapHtml: {
        label: "包标签",
        key: "wrapHtml",
        val: ''
      },
      // 图层
      zIndex: {
        label: "图层",
        key: "zIndex",
        val: 1
      },
    },
    // 动画
    animations: {
      // 子动画 
      subAn: <AnimateType>{
        /** 属性说明 */
        label: "子动画",
        /** 动画键 */
        key: "subAn",
        /** 使能状态 */
        enable: false,
        /** 动画类别:0-子动画;1-样式;2-变换;3-属性;4-线性;5-路径;6-子动画; */
        opt_an_classify: 0,
        /** 动画模式:1-值动画;2-值转换动画;3-自动画; */
        opt_an_model: 1,
        /** 使用数据*/
        use_data: {
          /** 使用数据状态:False-父数据;True-子数据; */
          is_use_parent: false,
          /** 使用父数据_选项:0_父数据; 1_图元数据;2_设备数据 */
          opt_use_parent_set: 0,
          /** 使用子数据_选项: 1_图元数据;2_设备数据 */
          opt_use_sub_set: 1,
          /** 父id */
          id_parent: 'none',
          /** 图元数据id */
          id_pel_data: 'none',
          /** 设备数据id  */
          id_equip_data: 'none',
        },
        /** 触发动画领域 */
        trigger: [500, 1000],
        /** 使用值选项:1-起始和结束;2-多值; */
        opt_use_val: 1,
        /** 线性比例的领域 */
        line_domain: [0, 1],
        /** 线性比例的范围 */
        line_range: [0, 1],
        /** 起始和结束 */
        from_to: [0, 90],
        /** 多值 */
        mult_val: '-10;0;10;1-10',
        /** 路径值 */
        path_val: [
          { x: 100, y: 100 },
          { x: 900, y: 900 }
        ],
        /** 路径id */
        path_id: 'none',
        /** 动画延时 */
        begin: 0,
        /** 动画时长 */
        dur: 3,
        /** 重复选项:1-无限循环;2-按次重复;3-按时长重复 */
        opt_repeat: 1,
        /** 重复次数 */
        repeat_count: 2,
        /** 重复时长 */
        repeat_dur: 2,
      },
    },
    // 事件
    events: {},
    // 子属性
    children: SelectedViewData,
    /** 动画值 */
    an_vals: [
      {
        /** id */
        key: onGetUUID(),
        /** 描述 */
        descr: '状态',
        /** 值 */
        val: '0',
        /** 设备数据_id */
        equipDataId: "none",
      },
    ]
  };
 // console.log(pelInfo)
  workStore.pels.push(pelInfo)        // 添加-图元数据
  canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
  canvasStore.selectKeys = []         // 清空-选择键
  canvasStore.selectKeys.push(wrapId)  // 设置选择键
  setTimeout(() => {
    canvasStore.selectToggle = !canvasStore.selectToggle // 触发-选择切换
  }, 10)
}

/** 包分解 */
export const onWrapDismiss = () => {
 // console.log("图元编辑-分解图元");
  if (canvasStore.selectedPel.type !== "wrap") {
    return;
  }
  /**包元素 */
  let WrapElement: any[] = [];

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历-选中的id,
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 // console.log("遍历-选中的id");
  /** 遍历-视图数据 根据键删除图元 */
  for (let Index = 0; Index < canvasStore.selectedPel.children.length; Index++) {
    let pelItem = canvasStore.selectedPel.children[Index];
    pelItem.parent = 'none';//更改父键

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 更改动画父Id
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 旋转 rotate 
    try {
      pelItem.animations.rotate.use_data.is_use_parent = false;
    } catch (error) { }
    // 缩放 scale
    try {
      pelItem.animations.scale.use_data.is_use_parent = false;
    } catch (error) { }
    // 水平平移 translateX
    try {
      pelItem.animations.translateX.use_data.is_use_parent = false;
    } catch (error) { }
    // 垂直平移 translateY
    try {
      pelItem.animations.translateY.use_data.is_use_parent = false;
    } catch (error) { }
    // 水平拉伸 skewX
    try {
      pelItem.animations.skewX.use_data.is_use_parent = false;
    } catch (error) { }
    // 垂直拉伸 skewY
    try {
      pelItem.animations.skewY.use_data.is_use_parent = false;
    } catch (error) { }
    // 线性移动 lineMove
    try {
      pelItem.animations.lineMove.use_data.is_use_parent = false;
    } catch (error) { }
    // 路径移动 pathMove
    try {
      pelItem.animations.pathMove.use_data.is_use_parent = false;
    } catch (error) { }
    //--------------------------------------------------------------------| 属性        
    // 坐标x1
    try {
      pelItem.animations.x1.use_data.is_use_parent = false;
    } catch (error) { }
    // 坐标x2
    try {
      pelItem.animations.x2.use_data.is_use_parent = false;
    } catch (error) { }
    // 坐标y1
    try {
      pelItem.animations.y1.use_data.is_use_parent = false;
    } catch (error) { }
    // 坐标y2
    try {
      pelItem.animations.y2.use_data.is_use_parent = false;
    } catch (error) { }
    // 圆心cx
    try {
      pelItem.animations.cx.use_data.is_use_parent = false;
    } catch (error) { }
    // 圆心cy
    try {
      pelItem.animations.cy.use_data.is_use_parent = false;
    } catch (error) { }
    // 半径 radius
    try {
      pelItem.animations.radius.use_data.is_use_parent = false;
    } catch (error) { }
    // 半径 radiusX
    try {
      pelItem.animations.radiusX.use_data.is_use_parent = false;
    } catch (error) { }
    // 半径 radiusY
    try {
      pelItem.animations.radiusY.use_data.is_use_parent = false;
    } catch (error) { }
    // 水平移动 left
    try {
      pelItem.animations.left.use_data.is_use_parent = false;
    } catch (error) { }
    // 垂直移动 top
    try {
      pelItem.animations.top.use_data.is_use_parent = false;
    } catch (error) { }
    // 矩形宽度 rectWidth
    try {
      pelItem.animations.rectWidth.use_data.is_use_parent = false;
    } catch (error) { }
    // 矩形高度 rectHeight
    try {
      pelItem.animations.rectHeight.use_data.is_use_parent = false;
    } catch (error) { }
    // 文本内容
    try {
      pelItem.animations.textContent.use_data.is_use_parent = false;
    } catch (error) { }
    // 填充颜色 fill
    try {
      pelItem.animations.fill.use_data.is_use_parent = false;
    } catch (error) { }
    // 轮廓颜色 
    try {
      pelItem.animations.stroke.use_data.is_use_parent = false;
    } catch (error) { }
    // 虚线 
    try {
      pelItem.animations.strokeDasharray.use_data.is_use_parent = false;
    } catch (error) { }
    // 线条流动 
    try {
      pelItem.animations.strokeDashoffset.use_data.is_use_parent = false;
    } catch (error) { }
    // 透明度_元素 
    try {
      pelItem.animations.opacity.use_data.is_use_parent = false;
    } catch (error) { }
    // 透明度_填充 
    try {
      pelItem.animations.fillOpacity.use_data.is_use_parent = false;
    } catch (error) { }
    // 透明度_轮廓 
    try {
      pelItem.animations.strokeOpacity.use_data.is_use_parent = false;
    } catch (error) { }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 更改-图元分类
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /** 图元类型 */
    let PelType = pelItem.type
    if (PelType === "horizontaLine" /*水平线*/ ||
      PelType === "verticalLine" /*垂直线*/ ||
      PelType === "slantLine" /*斜线*/ ||
      PelType === "circle" /*圆*/ ||
      PelType === "ellipse" /*椭圆*/ ||
      PelType === "arc" /*三点弧线*/ ||
      PelType === "rectangle"/*矩形*/ ||
      PelType === "circlePolygon" /*圆分多边形*/ ||
      PelType === "polygon" /*多边形*/ ||
      PelType === "polyline" /*折线*/ ||
      PelType === "path" /*路径*/ ||
      PelType === 'svgText'/*SVG文本*/
    ) {
      pelItem.category = 'svg';// 图元分类
    }

    WrapElement.push(pelItem);
  }
  /**★ 根据键删除图元 */
  onPelDeleteByKey(workStore.pels, canvasStore.selectedPel.key)
  canvasStore.selectKeys = [];//清空-选择键
 // console.log(SvgDataItem);

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历-视图项 
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  WrapElement.forEach((item: any) => {
    workStore.pels.push(item);
  });
  //🚩 不显示光标
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "default");//默认
  }
}
